<template>
    <template v-if='type == "batch"'>
        <div :class='$style.title'>
            <div :class='$style.item'>总资产</div>
            <div :class='$style.item'>标的</div>
            <div :class='$style.item'>总仓位</div>
        </div>
        <template v-if='params != null'>
            <template v-for='(item, index) in params' :key='item.date'>
                <div :class='$style.date'>{{item.date}}</div>
                <div :class='$style.rows' v-for='(row, i) in item.row' :key='i'>
                    <div :class='$style.item'>{{row.value}}</div>
                    <div :class='$style.item'>{{row.symbol}}</div>
                    <div :class='$style.item'>{{row.position}}</div>
                </div>
                <div :class='$style.blank'></div>
            </template>
            <template v-if='params.length == 0'>
                <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
            </template>
        </template>
        <template v-else>
            <a-skeleton active />
        </template>
    </template>
    <template v-else>
        <template v-if='params != null'>
            <a-table :pagination='false' :dataSource='params' :columns='columns'></a-table>
        </template>
        <template v-else>
            <a-skeleton active />
        </template>
    </template>
</template>

<script lang='ts' setup>
    import { Empty } from 'ant-design-vue';
    withDefaults(defineProps<{params : any, type : 'single' | 'batch'}>(), {
        params : null,
    })

    const columns = [
        {title : '日期', dataIndex : 'date'},
        {title : '总资产', dataIndex : 'value'},
        {title : '标的', dataIndex : 'symbol'},
        {title : '总仓位', dataIndex : 'position'},
    ]
</script>


<style scoped module lang='scss'>
    @mixin padding {
        padding: 10px 0;
    }
    .title{
        display: flex;
        background: $background-color;
        .item{
            flex: 1;
            text-align: center;
            @include padding();
        }
    }

    .rows {
        display: flex;
        .item{
            flex: 1;
            text-align: center;
            @include padding();
            border-top: 1px solid $border-color;
        }
    }

    .date{
        @include padding();
        font-weight: bold;
    }

    .total{
        @include padding();
    }
    
    .blank{
        background: $background-color;
        height: 30px;
    }
</style>